<template>
  <div class="batch-update-warpper">
    <!-- 切换修改项 -->
    <div v-if="editListInfo.isShow" class="batch-update-select">
      <edit-list
        @editListClick="editListClick"
      />
    </div>
    <div v-else class="batch-update-article">
      <!-- 切换修改项 -->
      <div class="update-select">
        <h4 style="margin: 5px 0; line-height: 22px;">批量{{ editListInfo.selectLabel }}</h4>
        <el-popover
          v-model="pageInfo.selectActive"
          placement="bottom-start"
          width="630"
        >
          <edit-list
            @editListClick="editListClick"
          />
          <span slot="reference" :class="pageInfo.selectActive ? 'select' : 'no-select'" class="article-select">
            切换
            <i class="el-icon-arrow-down" />
          </span>
        </el-popover>
      </div>
      <!-- 修改项tabs内容 -->
      <div class="update-tabs">
        <el-tabs v-model="batchForm.search_type">
          <el-tab-pane label="按范围修改" name="0">
            <div>
              <edit-range ref="editRange" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="按商品修改" name="1">
            <div style="display: flex;">
              <el-button type="primary" style="margin: 10px auto;" @click="pageInfo.isEditShop = true">选择商品</el-button>
              <el-dialog title="选择商品" :visible.sync="pageInfo.isEditShop" width="1000px" class="edit-shop-dialog">
                cxx
              </el-dialog>
            </div>
          </el-tab-pane>
          <el-tab-pane label="按商品ID修改" name="2">
            <div class="edit-shop-id">
              <el-input
                v-model="pageInfo.shopId"
                type="textarea"
                placeholder="输入商品ID，多个商品ID用英文逗号 (,) 隔开，最多输入200个"
                maxlength="200"
              />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 修改项详情内容 -->
      <div class="update-content">
        <h4>修改内容</h4>
        <div class="content-form">
          <div
            v-for="item in editResult"
            :key="item.type"
          >
            <!-- 批量修改标题 -->
            <div v-if="item.type === 'UpdateTitle' && editListInfo.selectLabel === '修改标题'" class="main-title">
              <edit-content ref="editContent" />
            </div>
            <!-- 批量修改短标题 -->
            <div v-if="item.type === 'UpdateShortTitle' && editListInfo.selectLabel === '修改短标题'" class="short-title">
              <edit-short-title ref="editShortTitle" />
            </div>
            <!-- 批量修改上下架 -->
            <div v-if="item.type === 'UpdateOnsale' && editListInfo.selectLabel === '修改上下架'" class="on-sale">
              <edit-on-sale ref="UpdateOnsale" />
            </div>
            <!-- 批量修改预售-->
            <div v-if="item.type === 'UpdatePresale' && editListInfo.selectLabel === '修改预售'" class="on-sale">
              <edit-presale ref="UpdatePresale" />
            </div>
            <!-- 批量修改规格（sku） -->
            <div v-if="item.type === 'UpdateSkuCode' && editListInfo.selectLabel === '修改规格（sku）'" class="sku-code">
              <edit-sku-code ref="editSkuCode" />
            </div>
            <!-- 批量修改商品编码 -->
            <div v-if="item.type === 'UpdateGoodsCode' && editListInfo.selectLabel === '修改商品编码'" class="goods-code">
              <edit-goods-code ref="editGoodsCode" />
            </div>
            <!-- 批量修改运费模板 -->
            <div v-if="item.type === 'UpdateTemplate' && editListInfo.selectLabel === '修改运费模板'" class="template">
              <edit-template ref="editTemplate" />
            </div>
            <!-- 批量修改库存 -->
            <div v-if="item.type === 'UpdateStock' && editListInfo.selectLabel === '修改库存'" class="stock">
              <edit-stock ref="editStock" />
            </div>
            <!-- 批量修改价格 -->
            <div v-if="item.type === 'UpdatePrice' && editListInfo.selectLabel === '修改价格'" class="price">
              <edit-price ref="editPrice" />
            </div>
            <!-- 批量修改主图 -->
            <div v-if="item.type === 'UpdateMainPic' && editListInfo.selectLabel === '修改商品主图'" class="main-pic">
              <edit-main-pic ref="editMainPic" />
            </div>
          </div>
          <!-- 批量修改详情图 -->
          <div v-if="editListInfo.selectLabel === '修改商品详情图'" class="detail-pic">
            <edit-detail-pic ref="editDetailPic" />
          </div>
          <!-- 批量修改满减折扣 -->
          <div v-if="editListInfo.selectLabel === '修改满减折扣'" class="discount">
            <edit-discount ref="editDiscount" />
          </div>
          <!-- 批量修改商品描述 -->
          <div v-if="editListInfo.selectLabel === '修改商品描述'" class="shop-desc">
            <edit-shop-desc ref="editShopDesc" />
          </div>
          <!-- 批量修改商品卖点 -->
          <div v-if="editListInfo.selectLabel === '修改商品卖点'" class="shop-sale">
            <edit-shop-sale ref="editShopSale" />
          </div>
          <!-- 批量修改商品备注 -->
          <div v-if="editListInfo.selectLabel === '修改商品备注'" class="shop-remarks">
            <edit-shop-remarks ref="editShopRemarks" />
          </div>
          <!-- 批量修改功能设置 -->
          <div v-if="editListInfo.selectLabel === '修改功能设置'" class="shop-other">
            <edit-shop-other ref="editShopOther" />
          </div>
        </div>
      </div>
      <!-- 修改项按钮操作 -->
      <div class="update-handle-btn">
        <el-button @click="handlePreview">预览修改效果</el-button>
        <el-button type="primary" @click="handleEdit">开始批量修改</el-button>
      </div>
      <!-- 预览效果信息 -->
      <div class="update-preview">
        <edit-preview />
      </div>
    </div>
  </div>
</template>

<script>
import EditList from './components/edit-list.vue'
import EditRange from './batch-update-components/edit-range.vue'
import EditContent from './components/edit-content.vue'
import EditShortTitle from './batch-update-components/edit-short-title.vue'
import EditOnSale from './batch-update-components/edit-on-sale.vue'
import EditPresale from './batch-update-components/edit-presale.vue'
import EditSkuCode from './batch-update-components/edit-sku-code.vue'

import EditGoodsCode from './batch-update-components/edit-goods-code.vue'
import editTemplate from './batch-update-components/edit-template.vue'
import editStock from './batch-update-components/edit-stock.vue'
import editPrice from './batch-update-components/edit-price.vue'
import editMainPic from './batch-update-components/edit-main-pic.vue'
import editDetailPic from './batch-update-components/edit-detail-pic.vue'
import editDiscount from './batch-update-components/edit-discount.vue'
import editShopDesc from './batch-update-components/edit-shop-desc.vue'
import editShopSale from './batch-update-components/edit-shop-sale.vue'
import editShopRemarks from './batch-update-components/edit-shop-remarks.vue'
import editShopOther from './batch-update-components/edit-shop-other.vue'
import EditPreview from './batch-update-components/edit-preview.vue'

// import result from './batch-update-mock.json'
import { getPlatformUpdateConfig, createDistributionUpdateTask } from '@/api/shop-manage'
export default {
  components: { EditList, EditRange, EditContent, EditShortTitle, EditOnSale, EditPresale,
    EditSkuCode, EditGoodsCode, editTemplate, editStock, editPrice, editMainPic, editDetailPic,
    editDiscount, editShopDesc, editShopSale, editShopRemarks, editShopOther, EditPreview },
  data() {
    return {
      pageInfo: {
        selectActive: false,
        isEditShop: false,
        shopId: '',
        editOtherArr: ['承诺发货时间', '是否限购', '退款规则', '服务承诺', '是否二手', '假一赔十']
      },
      // 修改列表弹窗
      editListInfo: {
        isShow: true,
        selectLabel: '',
        selectValue: ''
      },
      batchForm: {
        search_type: '0',
        total_count: 0 // 默认值0。点预览会返回这个值，用户再提交修改任务时就把这个返回的数量当参数传上去
      },
      editResult: {}
    }
  },
  created() {
    console.log(this.$route.query)
    const { selectLabel, selectValue } = this.$route.query
    selectValue ? this.editListInfo.isShow = false : ''
    this.editListInfo.selectLabel = selectLabel
    this.editListInfo.selectValue = selectValue
    this.handlegetPlatformUpdateConfig()
  },
  methods: {
    // 获取平台批量修改的配置文件
    handlegetPlatformUpdateConfig() {
      getPlatformUpdateConfig().then(res => {
        console.log('获取平台批量修改的配置文件', res.data)
        this.editResult = res.data
      })
    },
    // 创建/预览修改任务
    handlecreateDistributionUpdateTask() {
      createDistributionUpdateTask({
        search_config: // 所有搜索商品列表的固定实体，以下参数填null为搜索全部
        {
          SearchGoodsIsMoved: null, // 本店铺是否已经搬家过（是否复制），需要查搬家记录数据库 0-否 1-是 null 表示不查
          SearchShopPlatFormCode: 5, // 本次搜索的店铺平台(当前用户平台) *
          SearchShopCode: '319819719', // 本次搜索的店铺，用于查询搬家记录数据库 *
          SearchGoodsCategory: '', // 前端选择的类目ID
          SearchGoodsCategoryLevel: null, // 前端选择的类目ID等级(1\2\3\4\5\6)
          SearchGoodsSourcePlatFormCode: null, // 搜索店铺所属平台 *此接口仅搜索本店铺商品
          SearchGoodsSourceShopCode: null, // 搜索的店铺ID，单个 *此接口仅搜索本店铺商品
          SearchGoodsStatus: null, // null全部，0已下架，1在售，2已删除，3草稿箱，4回收站，5其他
          SearchGoodsAuditAtatus: null, // null全部，0未提交审核，1待审核，2审核通过，3审核未通过  4-封禁
          SearchGoodsTitle: null, // 商品标题
          SearchGoodsPriceMin: null, // 起始价格，null全部
          SearchGoodsPriceMax: null, // 结束价格，null全部
          SearchGoodsStockMin: null, // 起始库存，null全部
          SearchGoodsStockMax: null, // 结束库存，null全部
          SearchGoodsScoreMin: null, // 起始质量分,null全部
          SearchGoodsScoreMax: null, // 结束质量分，null全部
          SearchGoodsCreateTimeMin: null, // 起始时间时间格式 ("yyyy-MM-dd HH:mm:ss")
          SearchGoodsCreateTimeMax: null, // 结束时间 时间格式 ("yyyy-MM-dd HH:mm:ss")
          SearchGoodsMoveTimeMin: null, // 起始搬家时间 时间格式 ("yyyy-MM-dd HH:mm:ss")
          SearchGoodsMoveTimeMax: null, // 结束搬家时间 时间格式 ("yyyy-MM-dd HH:mm:ss")
          SearchGoodsIsDistribution: null, // 是否分销品，null全部，1是，0不是
          SearchGoodsTemplateId: null, //  单个运费模板，null全部
          SearchGoodsPresaleType: null, // null全部，预售类型，0现货，1全款预售，2sku预售，3成团预售(支付后N天发货)，12现货+预售，13新预售，14阶梯发货
          SearchGoodsBrandId: null, // 单个品牌ID，null全部
          SearchGoodsBrandValue: null, // 品牌名称模糊查询
          SearchGoodsCode: '', // 商品编码/货号，null全部，多个以逗号隔开
          SearchGoodsIds: null, // 商品ID，null全部，多个以逗号隔开
          SearchGoodsAppraisal: null, //  null全部，1是标记过鉴图，0没标记过
          SearchGoodsIsMove: null, // 是否搬家商品 null全部，1是 0否(本店商品)
          SearchGoodsMoveSourceShopName: null, // null全部，搬家店铺来源
          SearchGoodsIsCopy: null // 是否复制商品，null全部，1是0否
        },
        update_config: '{"max_length":60,"del_before_num":10,"del_after_num":2,"prefix":"前缀","suffix":"后缀","cut_type":1,"delete_words":"","replace":{"原字":"新字"}}', // 执行批量修改任务时传的参数，对应GoodUpdateParam.cs里面的参数，序列化为string，根据平台区分
        search_type: +this.batchForm.search_type, // 0按搜索条件执行，1按商品ID执行（如果预览后排除部分商品也按此方式）
        goods_ids: // 按商品ID修改的商品ID
        [
          'string'
        ],
        is_preview: true, // true预览功能,false执行批量修改任务
        del_goods_ids: // 预览后，开始批量修改所排除的商品ID（is_preview=false）
        [
          'string'
        ],
        edit_type: 0, // 修改类型（会影响参数update_config，每个类型参数不同）0标题，1上下架，2品牌，3预售，4删除商品，5sku编码，6商品编码，7团购价，8库存，9主图，10详情图，11详情文本，12主图补全，13两件打折，14运费模板，15服务，16短标题，17sku规格名
        total_count: this.batchForm.total_count										// 任务总数，首次预览后提交由预览接口返回，未预览填0
      }).then(res => {
        console.log(res)
      })
    },
    editListClick(val) {
      console.log('sagasdf', val)
      this.editListInfo.isShow = false // 这个是初始化进入页面的展示隐藏
      this.pageInfo.selectActive = false // 这个是筛选的展示隐藏
      this.editListInfo.selectLabel = val.label
    },
    handlePreview() {
      this.handlecreateDistributionUpdateTask()
    },
    handleEdit() {
      console.log(this.$refs)
      const editRangeForm = this.$refs?.editRange?.form
      const editContentForm = this.$refs?.editContent?.form
      if (this.editListInfo.selectLabel === '修改标题') {
        editContentForm.replaceKeywords = editContentForm.replaceKeywords.filter(item => item.replaceBefore && item.replaceAfter)
      } else if (this.editListInfo.selectLabel === '修改短标题') {
        this.$refs?.editContent?.form
      }
      console.log(editRangeForm, editContentForm)
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  line-height: 17px;
}
.batch-update-warpper {
  padding: 12px 20px 0;
  .batch-update-select {
    padding: 20px;
    // 减去顶部导航栏 + 距顶部和底部的距离（若有全局变量则用全局变量替换死值）
    height: calc(100vh - 84px - 12px - 20px);
    background: #fff;
    border-radius: 4px;
  }
  .batch-update-article {
    &>div {
      margin-top: 20px;
      padding: 20px;
      background: #fff;
      border-radius: 4px;
      &:first-of-type {
        margin-top: 0;
      }
      &.update-select {
        display: flex;
        align-items: center;
        .article-select {
          margin-left: 12px;
          color: #4E78EF;
          cursor: pointer;
          &.select {
            i {
              rotate: 180deg;
              transition: all .3s;
            }
          }
          &.no-select {
            i {
              rotate: 0deg;
              transition: all .3s;
            }
          }
        }
      }
      &.update-tabs {
        padding-top: 10px;
        ::v-deep .el-tabs__header {
          margin-bottom: 20px;
        }
        .edit-shop-dialog {
          ::v-deep {
            .el-dialog__header {
              padding: 17px 20px;
              border-bottom: 1px solid rgba(0,0,0,0.06);
            }
            .el-dialog__body {
              padding: 20px;
            }
          }
        }
        .edit-shop-id {
          ::v-deep {
            .el-textarea {
              width: 100%;
            }
            .el-textarea__inner {
              height: 100px;
              background-color: #F7F8FA;
              border: none;
            }
          }
        }
      }
      &.update-content {
        padding: 0;
        h4 {
          margin: 0;
          padding: 12px 20px;
          line-height: 24px;
          border-bottom: 1px solid rgba(0,0,0,0.06);
        }
        .content-form {
          padding: 20px 20px 0;
          .main-title {
            padding-bottom: 38px;
          }
          .short-title,
          .sku-code {
            padding-bottom: 92px;
          }
          .on-sale {
            padding-bottom: 386px;
          }
          .goods-code {
            padding-bottom: 182px;
          }
          .template {
            padding-bottom: 390px;
          }
          .stock,
          .price {
            padding-bottom: 234px;
          }
          .main-pic {
            padding-bottom: 126px;
          }
          .detail-pic {
            padding-bottom: 238px;
          }
          .discount {
            padding-bottom: 314px;
          }
          .shop-desc {
            padding-bottom: 46px;
          }
          .shop-sale {
            padding-bottom: 14px;
          }
          .shop-remarks {
            padding-bottom: 298px;
          }
          .shop-other {
            padding-bottom: 194px;
          }
        }
      }
      &.update-handle-btn {
        display: flex;
        justify-content: flex-end;
        padding: 10px 20px;
      }
      &.update-preview {
      }
    }
  }
}
</style>
